.lg-component-audio {
	overflow: hidden;
	position: relative
}

.lg-component-audio-pause,
.lg-component-audio-play {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain
}

.lg-component-audio-pause {
	display: none
}

.lg-component-audio-core {
	visibility: hidden
}

.lg-component-audio-pause .default-ic,
.lg-component-audio-play .default-ic {
	position: absolute;
	top: 50%;
	margin-top: -20px;
	left: 50%;
	margin-left: -28px
}

.lg-component-img {
	background-repeat: no-repeat;
	background-position: center center;
	box-sizing: border-box;
	vertical-align: top
}

.lg-component-label {
	font-size: 24px;
	color: #000;
	line-height: 1.2;
	box-sizing: content-box;
	font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif
}

.lg-component-label,
.lg-component-label a,
.lg-component-label font,
.lg-component-label p,
.lg-component-label span {
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	-moz-osx-font-smoothing: grayscale
}

.lg-component-label div,
.lg-component-label p {
	margin: 0
}

.lg-backface,
.lg-page {
	background-size: cover !important
}

body,
html {
	width: 100%;
	height: 100%
}

article,
body,
div,
h1,
h2,
h3,
h4,
h5,
html,
p,
section {
	margin: 0;
	padding: 0;
	outline: 0;
	-webkit-tap-highlight-color: transparent
}

.lg-icon {
	position: absolute;
	width: 0;
	height: 0;
	left: -50px;
	z-index: -1
}

.lg-backface,
.lg-loading-page {
	pointer-events: none;
	height: 100%
}

.lg-container,
.lg-page-container {
	width: 100%;
	min-height: 500px;
	position: relative;
	z-index: 1
}

.lg-container {
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: 100%;
	opacity: 0
}

.lg-container.ready {
	opacity: 1
}

.lg-page-container {
	overflow: visible
}

.lg-back-stage,
.lg-front-stage {
	overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none
}

.lg-back-stage .lg-surface,
.lg-front-stage .lg-surface {
	pointer-events: all
}

.lg-back-stage {
	z-index: 0
}

.lg-front-stage {
	z-index: 2
}

.lg-loading-page {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
}

.lg-page {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden
}

.lg-backface {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
}

.lg-surface {
	overflow: hidden;
	box-sizing: content-box
}

.lg-surface,
.lg-trailer {
	position: absolute;
	z-index: 1
}

.lg-container .lg-back-stage {
	background-color: #FFF
}

.lg-container.strip .lg-back-stage,
.lg-container.strip .lg-front-stage {
	position: fixed
}

.lg-container.strip.pc {
	height: 100%
}

.lg-container.strip.pc .lg-page-container {
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll
}

.lg-container.multi {
	height: 100%;
	background-color: #000
}

.lg-container.multi .lg-page-container {
	height: 100%
}

.lg-container.expand {
	height: 100%;
	max-height: 100%;
	overflow: scroll
}

.no-anim .lg-trailer {
	display: block !important
}

.no-anim .lg-trailer[hidden] {
	display: none !important
}

.no-anim .lg-page .lg-trailer.animated {
	animation-name: none !important
}

@keyframes lg-toast-live {

	0%,
	100% {
		opacity: 0
	}

	10%,
	90% {
		opacity: .8
	}
}

.lg-toast-message {
	word-wrap: break-word
}

.lg-toast-message a,
.lg-toast-message label {
	color: #fff
}

.lg-toast-top-center {
	top: 0;
	right: 0;
	width: 100%
}

.lg-toast-container {
	position: fixed;
	z-index: 999999
}

.lg-toast-container * {
	box-sizing: border-box
}

.lg-toast-container>.lg-toast {
	position: relative;
	overflow: hidden;
	margin: 0 0 6px;
	padding: 15px 15px 15px 50px;
	width: 400px;
	border-radius: 3px;
	background-position: 15px center;
	background-repeat: no-repeat;
	box-shadow: 0 0 12px #999;
	color: #fff;
	background-color: #030303;
	animation: lg-toast-live 3s ease-in infinite
}

.lg-toast-container>.lg-toast-info {
	background-image: url() !important;
	background-color: #2f96b4
}

.lg-toast-container>.lg-toast-error {
	background-image: url() !important;
	background-color: #bd362f
}

.lg-toast-container>.lg-toast-success {
	background-image: url() !important;
	background-color: #51a351
}

.lg-toast-container>.lg-toast-warning {
	background-image: url() !important;
	background-color: #f89406
}

.lg-toast-container.lg-toast-top-center>div {
	width: 400px;
	margin: auto
}

.outer-container,
body,
html {
	height: 100%;
	width: 100%
}

.outer-container {
	background-color: rgba(0, 0, 0, .5)
}

.mid-content {
	position: relative;
	width: 900px;
	height: 100%;
	margin: 0 auto
}

.mid-content .phone-container {
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -375px;
	width: 520px;
	height: 750px;
	box-sizing: content-box
}

.mid-content .phone {
	position: absolute;
	left: 40px;
	width: 400px;
	height: 650px;
	display: inline-block;
	background: #FFF;
	box-sizing: content-box;
	border-top: 40px solid #FFF;
	border-left: 10px solid #FFF;
	border-right: 10px solid #FFF;
	border-bottom: 60px solid #FFF;
	border-radius: 20px;
	transform-origin: 100% 0;
	transform: scale(1)
}

.mid-content .phone .lg-container {
	outline: #888 solid 1px;
	transform: none !important
}

.mid-content .right {
	position: absolute;
	left: 570px;
	width: 300px;
	top: 50%;
	margin-top: -325px;
	height: 650px;
	font-size: 14px;
	text-align: center;
	color: #FFF
}

.mid-content .right .qrcode-container {
	width: 170px;
	height: 170px;
	background-color: #FFF;
	border-radius: 5px;
	margin: 70px auto 10px
}

.mid-content .right .qrcode-container .qrcode {
	width: 160px;
	height: 160px;
	margin: 5px;
	float: left;
	overflow: hidden
}

.mid-content .right .qrcode-container .qrcode img {
	width: 160px;
	height: 160px
}

.mid-content .right .text {
	width: 100%;
	height: auto
}

.mid-content .right .text.title {
	font-size: 18px;
	margin-top: 40px
}

.mid-content .right .text.creater {
	margin: 7px auto
}

.mid-content .right .text.desc {
	text-align: left;
	line-height: 18px
}

.mid-content .right .open-new-window {
	width: 160px;
	height: 36px;
	line-height: 36px;
	border-radius: 40px;
	border: 1px solid #FFF;
	margin: 100px auto 0;
	font-size: 16px;
	cursor: pointer;
	display: none
}

.mid-content .right .open-new-window:hover {
	background-color: rgba(255, 255, 255, .1)
}

.mid-content .arrow {
	position: absolute;
	right: 0;
	bottom: 16px;
	border: 1px solid #FFF;
	border-radius: 12px;
	width: 40px;
	height: 74px;
	padding: 1px
}

.mid-content .arrow>div {
	background-image: url(../images/a142b550b6bc34ca93395f875ce8ab69_preview-sprite.png);
	background-repeat: no-repeat;
	width: 40px;
	height: 25px;
	cursor: pointer
}

.mid-content .arrow .up {
	background-position: 3px -76px;
	margin-top: 3px
}

.mid-content .arrow .down {
	background-position: 3px -114px;
	margin-top: 17px
}

.mid-content .phone-size {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 30px 0 0 30px
}

.mid-content .phone-size .item {
	display: block;
	background: #fff;
	color: #000;
	text-align: center;
	cursor: pointer;
	margin: 5px 0;
	border-radius: 5px;
	border-bottom: 8px solid #ddd;
	border-left: 2px solid #ddd;
	border-right: 2px solid #ddd;
	border-top: 5px solid #ddd;
	font-size: 12px
}


.mid-content .phone-size .item .phone-type {
	margin: 8px 0 5px
}

.mid-content .phone-size .item.active {
	border-color: #fff;
	background: #ddd
}

.mid-content .btn-block {
	margin-top: 20px
}

.mid-content .copy-url-btn,
.mid-content .login-btn,
.mid-content .use-template-btn {
	display: none;
	padding: 6px 20px;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 40px;
	font-size: 16px;
	cursor: pointer;
	float: left;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none
}

.mid-content .use-template-btn:hover,
.mid-content .zeroclipboard-is-hover {
	background-color: rgba(255, 255, 255, .1)
}

.mid-content .copy-url-btn {
	margin-left: 20px
}

.animated.flip {
	backface-visibility: visible !important
}

@charset "UTF-8";

.animated {
	animation-duration: 1s;
	animation-fill-mode: both
}

.animated.infinite {
	animation-iteration-count: infinite
}

.animated.hinge {
	animation-duration: 2s
}

.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
	animation-duration: .75s
}

@keyframes bounce {

	100%,
	20%,
	53%,
	80%,
	from {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		transform: translate3d(0, 0, 0)
	}

	40%,
	43% {
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		transform: translate3d(0, -30px, 0)
	}

	70% {
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		transform: translate3d(0, -15px, 0)
	}

	90% {
		transform: translate3d(0, -4px, 0)
	}
}

.bounce {
	animation-name: bounce;
	transform-origin: center bottom
}

@keyframes bounceIn {

	100%,
	20%,
	40%,
	60%,
	80%,
	from {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3)
	}

	20% {
		transform: scale3d(1.1, 1.1, 1.1)
	}

	40% {
		transform: scale3d(.9, .9, .9)
	}

	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03)
	}

	80% {
		transform: scale3d(.97, .97, .97)
	}

	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1)
	}
}

.bounceIn {
	animation-name: bounceIn
}

@keyframes exBounce {
	0% {
		transform: scale(0, 0)
	}

	3.333333% {
		transform: scale(.64545, .686015)
	}

	6.666667% {
		transform: scale(.798425, .90691)
	}

	10% {
		transform: scale(.92774, 1.07226)
	}

	13.333333% {
		transform: scale(1.01897, 1.14684)
	}

	16.666667% {
		transform: scale(1.07044, 1.140885)
	}

	20% {
		transform: scale(1.08847, 1.08847)
	}

	23.333333% {
		transform: scale(1.08303, 1.02623)
	}

	26.666667% {
		transform: scale(1.064445, .97964)
	}

	30% {
		transform: scale(1.041375, .958625)
	}

	33.333333% {
		transform: scale(1.01985, .960305)
	}

	36.666667% {
		transform: scale(1.00322, .97507)
	}

	40% {
		transform: scale(.99261, .99261)
	}

	43.333333% {
		transform: scale(.98758, 1.005735)
	}

	46.666667% {
		transform: scale(.986835, 1.01166)
	}

	50% {
		transform: scale(.988815, 1.011185)
	}

	53.333333% {
		transform: scale(.99207, 1.007025)
	}

	56.666667% {
		transform: scale(.99549, 1.002085)
	}

	60% {
		transform: scale(.998385, .998385)
	}

	63.333333% {
		transform: scale(1.000425, .996715)
	}

	66.666667% {
		transform: scale(1.001575, .99685)
	}

	70% {
		transform: scale(1.00198, .99802)
	}

	73.333333% {
		transform: scale(1.001855, .999415)
	}

	76.666667% {
		transform: scale(1.00144, 1.000455)
	}

	80% {
		transform: scale(1.000925, 1.000925)
	}

	83.333333% {
		transform: scale(1.000445, 1.00089)
	}

	86.666667% {
		transform: scale(1.00007, 1.00056)
	}

	90% {
		transform: scale(.999835, 1.000165)
	}

	93.333333% {
		transform: scale(.99972, .99987)
	}

	96.666667% {
		transform: scale(.999705, .99974)
	}

	100% {
		transform: scale(1, 1)
	}
}

.exBounce {
	animation-name: exBounce
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0)
	}

	100% {
		opacity: 1;
		transform: none
	}
}

.fadeInDown {
	animation-name: fadeInDown
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0)
	}

	100% {
		opacity: 1;
		transform: none
	}
}

.fadeInLeft {
	animation-name: fadeInLeft
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0)
	}

	100% {
		opacity: 1;
		transform: none
	}
}

.fadeInUp {
	animation-name: fadeInUp
}

@keyframes pulse {

	100%,
	from {
		transform: scale3d(1, 1, 1)
	}

	50% {
		transform: scale3d(1.05, 1.05, 1.05)
	}
}

.pulse {
	animation-name: pulse
}

@keyframes rubberBand {

	100%,
	from {
		transform: scale3d(1, 1, 1)
	}

	30% {
		transform: scale3d(1.25, .75, 1)
	}

	40% {
		transform: scale3d(.75, 1.25, 1)
	}

	50% {
		transform: scale3d(1.15, .85, 1)
	}

	65% {
		transform: scale3d(.95, 1.05, 1)
	}

	75% {
		transform: scale3d(1.05, .95, 1)
	}
}

.rubberBand {
	animation-name: rubberBand
}

@keyframes shake {

	100%,
	from {
		transform: translate3d(0, 0, 0)
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translate3d(-10px, 0, 0)
	}

	20%,
	40%,
	60%,
	80% {
		transform: translate3d(10px, 0, 0)
	}
}

.shake {
	animation-name: shake
}

@keyframes slideInUp {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}

	100% {
		transform: translate3d(0, 0, 0)
	}
}

.slideInUp {
	animation-name: slideInUp
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(.3, .3, .3)
	}

	50% {
		opacity: 1
	}
}

.zoomIn {
	animation-name: zoomIn
}

@font-face {
	font-family: 'love';
	src: url('../font/TTAiQingJ_2.ttf');
	font-style: normal;
	font-weight: 400
}
